<template>
    <div>
        <!-- :max-height="maxHeight"
            :height="tabHeight" -->
        <el-table
            v-loading="loading"
            header-align="center"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            row-key="id"
            @selection-change="
                val => {
                    $emit('handleSelectionChange', val);
                }
            "
        >
            <template v-for="(item, index) in copyData" :key="index">
                <el-table-column v-if="item.prop === 'selection'" type="selection" align="center" width="55"></el-table-column>
                <template v-else>
                    <el-table-column :prop="item.prop" :label="item.label" align="center" :min-width="item.width">
                        <!-- 如果显示插槽 -->
                        <template v-if="item.slotName" #default="scoped">
                            <!-- <slot name='operation' :list='item.operation' :row='scoped'></slot> -->
                            <!-- 显示操作功能按钮（内置插槽） -->
                            <template v-if="item.slotName === 'operation'">
                                <el-button
                                    v-for="items in item.operation"
                                    :key="items.label"
                                    v-limit="items.label"
                                    :type="items?.types"
                                    :icon="items?.icon"
                                    @click="operationClick(items, { eventName: items.onClick, ...scoped })"
                                >
                                    {{ items.label }}
                                </el-button>
                            </template>
                            <!-- 外置插槽 -->
                            <template v-else>
                                <slot :name="item.slotName" :scoped="scoped"></slot>
                            </template>
                        </template>
                    </el-table-column>
                </template>
            </template>
        </el-table>
    </div>
</template>

<script setup lang="ts">
/**
 *   data
 *        prop： 填tableData的key
 *        label: 表头名称
 *
 *        slotName:''       插槽名称（operation：操作属性--按钮    不可编辑）
 *                          operation
 *                                   label        名称            String
 *                                   types        类型            String
 *                                   onClick      事件            String
 *                                   href         跳转地址        Object/String
 *                                   openTarget   是否新窗口打开   Boolean & false
 *
 *   如果slotName不是operation，需要在该组件插入
 *   <elTwoTable>
 *      <template #slotName1></template>
 *      <template #slotName2></template>
 *   </elTwoTable>
 *
 */
import { computed } from 'vue';
import { useRouter } from 'vue-router';
import { EventOptionExtends, DataType } from '@/interface';

const router = useRouter();

interface Props {
    tableData?: any[];
    data?: DataType;
    loading?: boolean;
}

const emit = defineEmits<{
    (e: 'operationChange', data: number | object): void;
}>();

const props = withDefaults(defineProps<Props>(), {
    tableData: () => [],
    data: () => [],
    loading: false
});

// 拷贝data，防止修改表单数据，表格数据随之改变
const copyData = computed(() => {
    if (!props.data.length) return;
    const arr = [];
    for (const i of props.data) {
        arr.push(i);
    }
    return arr;
});
/**
 *  @param items 当前数据
 *
 *  @param data Object
 *
 */
const operationClick = (items: EventOptionExtends<object>, data: any) => {
    if (items?.href) {
        if (typeof items.href === 'object') {
            // 内链
            router.push(items.href);
        } else if (typeof items.href === 'string') {
            // 外链
            if (items?.openTarget) {
                window.open(items.href);
            } else {
                window.location.href = items.href;
            }
        }
        return;
    }
    emit('operationChange', data);
};
</script>

<style scoped lang="scss">
::v-deep(.el-checkbox) {
    margin: 0;
}
</style>
